import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { Carousel, Image } from 'antd';
import { IBanners } from "@/views/Discover/c-views/Recommend/store/recommend";

const contentStyle: React.CSSProperties = {
    height: '500px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
    margin: "0px"
};

interface IProps {
    children?: ReactNode,
    banners: IBanners[]
}

const TopBanner: FC<IProps> = ({ banners }) => {
    return (
        <div>
            <Carousel arrows autoplay>
                {
                    banners.map((item, index) => {
                        return (<div key={item.targetId}>
                            <h3 style={contentStyle}>
                                <Image
                                    preview={false}
                                    width={"100%"}
                                    src={item.imageUrl}
                                />

                            </h3>
                        </div>)
                    })
                }
            </Carousel>
        </div>
    )
}

export default memo(TopBanner)